import { useEffect, useState } from 'react'
import { Table, Button, message, Popconfirm } from 'antd';
import { getAccountApi,delAccountApi } from '../../../apis/users';
import moment from 'moment';

export default function AccountList() {

  const [data, setData] = useState([])
  const [total, setTotal] = useState(0)
  const columns = [
    {
      title: '用户名',
      dataIndex: 'account',
  
  
    },
    {
      title: '角色',
      dataIndex: 'userGroup',
  
    },
    {
      title: '创建时间',
      dataIndex: 'updateDate',
      render:(text)=>{
        return moment(text).format('YYYY-MM-DD HH:MM:SS')
      }
    },
  
    {
      title: '操作',
  
      render: (_, record) => (
        <Popconfirm
          title="提示"
          description="您确定要删除该数据吗?"
          onConfirm={()=>confirm(record._id)}
        >
          <Button type="primary">删除</Button>
        </Popconfirm>
  
      ),
    },
  ];
  useEffect(() => {
    renderTable()
  }, [])
  function renderTable(obj) {
    
    getAccountApi(obj).then(res => {
      console.log(res);
      setData(res.data)
      setTotal(res.totalCount)
    })
  }
  function onchange(page, pageSize) {
    console.log(page, pageSize);
    renderTable({ pageNumber: page, pageSize })
  }
 async function confirm(id){
  await delAccountApi(id)
  renderTable()
    message.success('删除成功');
  };
  return (
    <Table columns={columns}
      dataSource={data}
      rowKey="_id"
      pagination={{
        defaultCurrent: 1,
        defaultPageSize: 5,
        onChange: onchange,
        pageSizeOptions: [5, 10, 15, 20],
        total
      }} />
  )
}
